var SHAPE,COLOUR,R,G,B,radius,loc;
var canvas;

function setup() {

    createCanvas(640, 640);
	//canvas.parent('draw_panel');
	smooth();

	//FRAME
	fill(255);
	stroke(125);
	strokeWeight(3);
	rect(0,0,width,height);
	strokeWeight(1);
	rect(5,5,500,500);
	noFill();
	rect(5,5,505,505);

	//BRUSH_SIZE
	strokeWeight(3);
	line(50,600,250,600);
	loc=50;
	rectMode(CENTER);
	fill(125);
	rect(loc,600,10,20);

	
	//CLR
	textSize(16); 
	fill(80);
	noStroke();
	text("CLEAR", 560, 60);
	stroke(80);
	strokeWeight(1);
	noFill();
	rectMode(CORNER);
	rect(558,43,42,20);
	

	//COLOUR BOXES
	stroke(0);
	strokeWeight(1);
	rectMode(CORNER);

	fill(0,90);
	rect(515,600,20,20);

	fill(200,5,5,90);
	rect(540,600,20,20);

	fill(5,200,5,90);
	rect(565,600,20,20);

	fill(5,5,200,90);
	rect(590,600,20,20);

	//DEFAULT
	SHAPE=true;
	R=0;
	G=0;
	B=0;
}



function draw() {
	if(SHAPE==true){
		//strokeWeight(2);
		noStroke();
		fill(0,90);
    	ellipseMode(CENTER);
		ellipse(580,250,45,45);
		fill(200,90);
		rectMode(CENTER);
		rect(580,380,40,40);
	}
	else{
		//strokeWeight(2);
		noStroke();
		fill(200,90);
    	ellipseMode(CENTER);
		ellipse(580,250,45,45);
		fill(0,90);
		rectMode(CENTER);
		rect(580,380,40,40);
	}

	if(mouseIsPressed&&(mouseX>=558&&mouseX<=620)&&(mouseY>=43&&mouseY<=63)){
		fill(255);
    	noStroke();
    	rectMode(CORNER);
    	rect(7,7,495,495);
	}
		

	if(mouseIsPressed&&(mouseX>535&&mouseX<625)&&(mouseY>205&&mouseY<295))
		SHAPE=true;

	if(mouseIsPressed&&(mouseX>540&&mouseX<620)&&(mouseY>340&&mouseY<420))
		SHAPE=false;

	if(mouseIsPressed&&(mouseX>=515&&mouseX<=535)&&(mouseY>=600&&mouseY<=620)){
		R=0;G=0;B=0;
	}

	if(mouseIsPressed&&(mouseX>=540&&mouseX<=560)&&(mouseY>=600&&mouseY<=620)){
		R=200;G=5;B=5;
	}

	if(mouseIsPressed&&(mouseX>=565&&mouseX<=585)&&(mouseY>=600&&mouseY<=620)){
		R=5;G=200;B=5;
	}

	if(mouseIsPressed&&(mouseX>=580&&mouseX<=600)&&(mouseY>=600&&mouseY<=620)){
		R=5;G=5;B=200;
	}


  	if(mouseIsPressed&&SHAPE==true&&mouseX<495&&mouseY<495){
    	radius=random(5,30);
    	fill(R,G,B,90);
    	noStroke();
    	ellipse(mouseX, mouseY, radius, radius);
  	} 

  	if(mouseIsPressed&&SHAPE==false&&mouseX<495&&mouseY<495){
    	radius=random(5,30);
    	fill(R,G,B,90);
    	noStroke();
    	rect(mouseX, mouseY, radius, radius);
  	} 
 
}